{% extends 'front/index.html' %}

{% block content %}
    <link href="/static/front/css/order.css" rel="stylesheet" type="text/css" media="all"/>
    <!-- //end-smooth-scrolling -->

    <div class="banner banner10">
        <div class="container">
            <h2>Pay</h2>
        </div>
    </div>

    <div class="breadcrumb_dress">
        <div class="container">
            <ul>
                <li><a href="/index"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</a> <i>/</i>
                </li>
                <li>Pay</li>
            </ul>
        </div>
    </div>

    <div class="about">
        <div class="container">

            <div class="rt_content">
                <div class="page_title">
                    <h2 class="fl">订单详情</h2>
                </div>
                <table class="table">
                    <tr>
                        {# 这里是django模板渲染注释----- #}
                        <td id="sname">收件人：{{ username }}</td>
                        <td id="sphone">联系电话：{{ phone }}</td>
                        <td id="saddress">收件地址：{{ add }}</td>
                        <td>订单编号：{{ order_id }}</td>
                    </tr>
                    <tr>
                        <td>下单时间：{{ time|date:"Y-m-d H:i:s" }}</td>
                        <td>付款时间：{{ time|date:"Y-m-d H:i:s" }}</td>
                        <td>确认时间：{{ time|date:"Y-m-d H:i:s" }}</td>
                        <td>发货时间：- -</td>
                    </tr>
                    <tr>
                        <td>订单状态：<a>已付款，待发货</a></td>
                        <td colspan="3" >订单备注：
                            <mark id="snote">帮我检查好呀~谢谢~</mark>
                        </td>
                    </tr>
                </table>
                <table class="table">
                    <tr>
                        <td class="center">产品图片</td>
                        <td class="center">产品名称</td>
                        <td class="center">单价</td>
                        <td class="center">型号</td>
                        <td class="center">数量</td>
                        <td class="center">金额</td>
                        <td class="center">运费</td>
                    </tr>
                    {% for cart in cart_item %}
                        <tr>
                            <td class="center"><img src={{ cart.image }} width="50" height="50"/></td>

                            <td>{{ cart.sku }}</td>
                            <td class="center"><strong class="rmb_icon">$ {{ cart.price }}</strong></td>
                            <td class="center">
                                <p>{{ cart.type }}</p>
                            </td>
                            <td class="center"><strong>{{ cart.quantity }}</strong></td>
                            <td class="center"><strong
                                    class="rmb_icon">{{ cart.quantity }}*$ {{ cart.price }}=$ {{ cart.total }}</strong>
                            </td>
                            <td class="center">包邮</td>
                        </tr>
                    {% endfor %}

                </table>
                <h4 style="margin-left: 30px" id="money"> 总金额： ${{ money }}</h4>
                <aside class="mtb" style="text-align:right;">
                    <input type="button" value="继续购买" onclick="window.location.href='/products/'"
                           class="group_btn"/>
                    <input type="button" value="编辑收货信息" id="modifyOrder" class="group_btn"/>
                    <input type="button" value="确认订单" class="group_btn"/>
                    <input type="button" value="付款" onclick="pay()" class="group_btn"/>
                </aside>
            </div>

        </div>
    </div>

    <form action="/order_submit/" id="form1" class="hide" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <input name="name2" class="hide" id="name2" value="{{ username }}" />
        <input name="phone2" class="hide" id="phone2" value="{{ phone }}" />
        <input name="address2" class="hide" id="address2" value="{{ add }}" />
        <input name="money2" class="hide" id="money2" value="{{ money }}" />
        <input name="note2" class="hide" id="note2" />
    </form>

    <script src="/static/front/js/minicart.js"></script>
    <script>
        function pay() {
            alert('支付成功');
            $('#note2').val($('#note1').val());
            $('.w3view-cart').click();
            $('.sbmincart-remove').click();
            $('#form1').submit();
        }

        w3ls.render(parent = '#cart',
            template = '<%var items = cart.items();var settings = cart.settings();var hasItems = !!items.length;var priceFormat = { format: true, currency: cart.settings("currency_code") };var totalFormat = { format: true, showCode: true };%><form method="post" class="<% if (!hasItems) { %>sbmincart-empty<% } %>" action="<%= config.action %>" target="<%= config.target %>">    <button type="button" class="sbmincart-closer">&times;</button>    <ul>        <% for (var i= 0, idx = i + 1, len = items.length; i < len; i++, idx++) { %>        <li class="sbmincart-item">            <div class="sbmincart-details-name">                <a class="sbmincart-name" href="<%= items[i].get("href") %>"><%= items[i].get("w3ls_item") %></a>                <ul class="sbmincart-attributes">                    <% if (items[i].get("item_number")) { %>                    <li>                        <%= items[i].get("item_number") %>                        <input type="hidden" name="item_number_<%= idx %>" value="<%= items[i].get("item_number") %>" />                    </li>                    <% } %>                    <% if (items[i].discount()) { %>                    <li>                        <%= config.strings.discount %> <%= items[i].discount(priceFormat) %>                        <input type="hidden" name="discount_amount_<%= idx %>" value="<%= items[i].discount() %>" />                    </li>                    <% } %>                    <% for (var options = items[i].options(), j = 0, len2 = options.length; j < len2; j++) { %>                        <li>                            <%= options[j].key %>: <%= options[j].value %>                            <input type="hidden" name="on<%= j %>_<%= idx %>" value="<%= options[j].key %>" />                            <input type="hidden" name="os<%= j %>_<%= idx %>" value="<%= options[j].value %>" />                        </li>                    <% } %>                </ul>            </div>            <div class="sbmincart-details-quantity">                <input class="sbmincart-quantity" data-sbmincart-idx="<%= i %>" name="quantity_<%= idx %>" type="text" pattern="[0-9]*" value="<%= items[i].get("quantity") %>" autocomplete="off" />            </div>            <div class="sbmincart-details-remove">                <button type="button" class="sbmincart-remove" data-sbmincart-idx="<%= i %>">&times;</button>            </div>            <div class="sbmincart-details-price">                <span class="sbmincart-price"><%= items[i].total(priceFormat) %></span>            </div>            <input type="hidden" name="w3ls_item_<%= idx %>" value="<%= items[i].get("w3ls_item") %>" />            <input type="hidden" name="amount_<%= idx %>" value="<%= items[i].amount() %>" />            <input type="hidden" name="shipping_<%= idx %>" value="<%= items[i].get("shipping") %>" />            <input type="hidden" name="shipping2_<%= idx %>" value="<%= items[i].get("shipping2") %>" />        </li>        <% } %>    </ul>    <div class="sbmincart-footer">        <% if (hasItems) { %>            <div class="sbmincart-subtotal">                <%= config.strings.subtotal %> <%= cart.total(totalFormat) %>            </div>            <button class="sbmincart-submit" type="submit" data-sbmincart-alt="<%= config.strings.buttonAlt %>"><%- config.strings.button %></button>        <% } else { %>            <p class="sbmincart-empty-text"><%= config.strings.empty %></p>        <% } %>    </div>    <input type="hidden" name="cmd" value="_cart" />    <input type="hidden" name="upload" value="1" />    <% for (var key in settings) { %>        <input type="hidden" name="<%= key %>" value="<%= settings[key] %>" />    <% } %></form>'
        );

        w3ls.cart.on('w3sb_checkout', function (evt) {
            var items, len, i;

            if (this.subtotal() > 0) {
                items = this.items();

                for (i = 0, len = items.length; i < len; i++) {

                }
            }
        });
    </script>
    <!-- //cart-js -->

    <!--修改订单弹出框-->
    <script>
        $(document).ready(function () {
            //弹出文本性提示框
            $("#modifyOrder").click(function () {
                $(".pop_mo").fadeIn();
            });
            //弹出：取消或关闭按钮
            $(".falseBtn2").click(function () {
                $(".pop_mo").fadeOut();
                $('#sname').html('收件人：' + $('#name1').val());
                $('#sphone').html('联系电话：' + $('#phone1').val());
                $('#saddress').html('收货地址：' + $('#address1').val());
                $('#snote').html('备注：' + $('#note1').val());

                $('#name2').html('收件人：' + $('#name1').val());
                $('#phone2').html('联系电话：' + $('#phone1').val());
                $('#address2').html('收货地址：' + $('#address1').val());
                $('#note2').html('备注：' + $('#note1').val());
            });
        });
    </script>

    <section class="pop_mo" id="mo">
        <div class="pop_cont">
            <!--title-->
            <h3>订单信息</h3>
            <!--content-->
            <div class="pop_cont_input">
                <ul>
                    <li>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;收件人</span>
                        <input type="text" class="textbox" name="name1" id="name1" required="required" value="{{ username }}"/>
                    </li>
                    <li>
                        <span>联系电话</span>
                        <input type="text" class="textbox" name="phone1" id="phone1" required="required" value="{{ phone }}"/>
                    </li>
                    <li>
                        <span>收件地址</span>
                        <input type="text" class="textbox" name="address1" id="address1"  required="required"
                               value="{{ add }}"/>
                    </li>
                    <li>
                        <span>订单备注</span>
                        <input type="text" class="textbox mark" name="note1" id="note1" required="required"
                               value="帮我检查好呀~谢谢~"/>
                    </li>
                </ul>
            </div>
            <!--bottom:operate->button-->
            <div class="mo_btn">
                <button type="button" class="link_btn" onclick="modify()">修改</button>
                <button type="button" class="link_btn falseBtn2">退出</button>
                <button type="submit" class="link_btn" onclick="read()">确认</button>
            </div>
        </div>
    </section>
    <!--结束：弹出框效果-->

    <script type="text/javascript">
        jQuery(document).ready(read());
        function read() {
            $("#mo input").attr("disabled", "disabled");
            $("#mo select").attr("disabled", "disabled");
        }

        function modify() {
            $("#mo input").removeAttr("disabled");
            $("#mo select").removeAttr("disabled");
        }

    </script>

{% endblock %}

{% block footer %}
{% endblock %}